<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-button type="primary" @click="addOrUpdateHandle()" v-if="isAuth('sys:department:save')">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" row-key="id" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <!--  <el-table-column
          prop="date"
          label="编号"
          width="180">
        </el-table-column> -->
      <el-table-column prop="name" align="center" label="分类名称">
      </el-table-column>
      <el-table-column prop="parent_id" align="center" :formatter="parentId" label="分类级别">
      </el-table-column>
      <el-table-column prop="parent_id" align="center" label="是否推荐">
        <template slot-scope="{row}">
          <el-tag v-if="row.recommend" type="success">推荐</el-tag>
          <el-tag v-else type="danger">不推荐</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="order_index" align="center" label="排序">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作" width="120px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id,scope.row.parent_id)" v-if="isAuth('sys:department:update')">修改</el-button>
          <el-button type="text" class="c-error" size="small" @click="deleteHandle(scope.row.id)" v-if="isAuth('sys:department:del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pamars.limit"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pamars.page"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination> -->
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @updataList='updataList'></add-or-update>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import AddOrUpdate from './productType-add--update'
export default {
  data () {
    return {
      dataForm: {},
      pamars: {
        page: 1,
        limit: 10
      },
      totalPage: 0,
      tableData: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  mounted () {
    this.getList()
  },
  methods: {
    updataList (e) {
      if (e == 1) {
        this.getList()
      }
    },
    getList () {
      seviceApi.getCategoryAllList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.tableData = res.data.list
          this.totalPage = res.data.totalCount
        }
      })
    },
    // 分类级别
    parentId (row, column) {
      let pid = row.parent_id
      if (pid === 0) {
        return '一级'
      } else {
        return '二级'
      }
    },
    load (tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
        ])
      }, 1000)
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 新增 / 修改
    addOrUpdateHandle (id, parent_id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, parent_id)
      })
    },
    // 删除
    deleteHandle (id) {
      this.$confirm(`确定要删除该条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        seviceApi.deleteCategory(id).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
